<template>
  <div class="news-activity">
    <div class="news-activity-bg">
      <div class="news-activity-banner flex h-[330px] flex-wrap gap-x-[32px]">
        <div class="news-activity-banner-bg">
          <div class="news-activity-banner-img w-[530px]">
            <DCarousel autoplay :autoplay-speed="3000" @active-index-change="handleBanner">
              <DCarouselItem v-for="item in activityBanner" :key="item?.id">
                <GLink :href="`/activity/${item.id}`" target="_blank">
                  <img :src="item?.coverImg" :alt="item?.title" class="w-[530px] h-[298px]">
                </GLink>
              </DCarouselItem>
            </DCarousel>
          </div>
        </div>
        <div class="news-activity-banner-right flex-1">
          <div class="flex-1">
            <div class="ellipsis-two-line news-activity-banner-right-title">
              <StatusTag :activityType="activeBanner?.activityType" class="mr-[8px]" />
              <span>{{ activeBanner?.title }}</span>
            </div>
            <div class="mt-[16px] text-[var(--devui-placeholder)]">
              <GIcon name="gt-line-date" class="mr-[8px]" color="var(--devui-placeholder)" />
              <span>活动时间： {{ formatTime(activeBanner?.startTime, 'YYYY-MM-DD') }} 至 {{ formatTime(activeBanner?.endTime,
                'YYYY-MM-DD') }}</span>
            </div>
            <div class="news-activity-banner-right-status mt-[16px]"
              :class="{ 'text-[var(--tag-text-blue-color)]': activeBanner?.status === 1 }"
              :style="{ background: statusList[activeBanner?.status || 0].bgColor }">
              {{ statusList[activeBanner?.status || 0].text }}
            </div>
          </div>
          <GLink :href="`/activity/${activeBanner.id}`" target="_blank"
            class="w-[fit-content] news-activity-banner-right-btn">
            <d-button variant="solid" color="primary">
              点击查看
            </d-button>
          </GLink>
        </div>
      </div>
    </div>
    <div class="news-activity-content">
      <div class="news-activity-content-header flex-wrap">
        <div class="flex items-center gap-[16px]">
          <div class="news-activity-content-header-month">
            {{ monthEn }}
          </div>
          <span class="news-activity-content-header-text">活动日历</span>
          <ClientOnly>
            <d-date-picker-pro v-model="dateTime" format="YYYY-MM" type="month" @confirmEvent="handleTime"
              class="flex-1" placeholder="选择时间" />
          </ClientOnly>
        </div>
        <d-input v-model="searchText" class="flex-1" :maxlength="100" placeholder="搜索项目" @keypress.enter="search">
          <template #prefix>
            <GIcon name="gt-search" />
          </template>
        </d-input>
      </div>
      <div v-if="showList.length" class="news-activity-content-list">
        <template v-for="(item, index) in showList">
          <GLink v-if="showIndex > index" :key="index" :href="`/activity/${item.id}`" target="_blank"
            class="news-activity-content-list-item flex-wrap">
            <div class="flex items-center">
              <div class="news-activity-content-list-item-time">
                <div class="news-activity-content-list-item-date">
                  {{ formatTime(item?.startTime, 'MM/DD') }}
                </div>
                <div class="mt-[7px]">
                  {{ formatTime(item?.startTime, 'HH:mm:ss') }}
                </div>
              </div>
              <div class="pl-[16px] news-activity-content-list-item-img">
                <img :src="item?.coverImg" :alt="item?.title" class="w-[150px] h-[84px]">
              </div>
            </div>
            <div class="flex-1 min-w-[100px]">
              <div class="flex items-center">
                <StatusTag :activityType="item?.activityType" class="mr-[8px]" />
                <span class="ellipsis flex-1 news-activity-content-list-item-title">{{ item?.title }}</span>
              </div>
              <div class="mt-[16px] text-[var(--devui-placeholder)] news-activity-content-time">
                <GIcon name="gt-line-date" class="mr-[8px]" color="var(--devui-placeholder)" />
                <span>活动时间： {{ formatTime(item?.startTime, 'YYYY-MM-DD') }} 至 {{ formatTime(item?.endTime, 'YYYY-MM-DD')
                  }}</span>
              </div>
            </div>
            <div>
              <d-button>点击查看</d-button>
            </div>
          </GLink>
        </template>
      </div>
      <EmptyData v-else :hide-icon="false" class="h-full flex-1" />
      <div class="flex justify-center mt-[32px]" v-if="showIndex < showList.length">
        <div class="news-activity-content-list-more" @click="handleMore">
          加载更多
          <GIcon name="gt-line-down" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Carousel as DCarousel, CarouselItem as DCarouselItem } from 'vue-devui/carousel'
import { useTimeFormat } from '@/composables/hooks/useTimeFormat'
import data from '@/pages/Data/activity.json'
import StatusTag from './components/StatusTag.vue'

const { formatTime } = useTimeFormat()

// 对取到的数据做处理（排序，状态）
data.sort((a, b) => Number(new Date(b.startTime)) - Number(new Date(a.startTime)));
const activityList = data.map(item => {
  const currentTime = new Date();
  const startTimes = new Date(item.startTime);
  const endTimes = new Date(item.endTime);
  return {
    ...item,
    status: currentTime < startTimes ? 0 : currentTime > endTimes ? 2 : 1,
  }

})

const activityBanner = ref(activityList.slice(0, 3))
const activeBanner = ref(activityList[0])

const showIndex = ref(8)
const showList = ref(activityList)

const searchText = ref('')
const dateTime = ref(null)
const statusList = [{
  text: '活动未开始',
  bgColor: '#fff',
}, {
  text: '活动进行中',
  bgColor: '#DBE2FA',
}, {
  text: '活动已结束',
  bgColor: '#F1F1F8',
}]

const monthList = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
]
const monthEn = computed(() => {
  const month = dateTime.value ? formatTime(dateTime.value, 'M') : 'ALL'
  return monthList[Number.parseInt(month) - 1] || 'ALL'
})

function search() {
  navigateTo({
    name: 'search',
    query: {
      search: searchText.value,
      tab: 'activity'
    }
  })
}

const handleTime = () => {
  showIndex.value = 8
  if (dateTime.value) {
    showList.value = activityList.filter(item => formatTime(dateTime.value, 'YYYY-MM') === formatTime(item.startTime, 'YYYY-MM'))
  } else {
    showList.value = activityList
  }
}

function handleBanner(index: number) {
  activeBanner.value = activityBanner.value?.[index]
}

function handleMore() {
  showIndex.value += 8
}
</script>

<style lang="scss">
.news-activity {
  color: #3B3E55;
  margin-top: 32px;

  &-bg {
    background: url('@/assets/img/activity-bg.png') no-repeat;
    background-size: cover;
  }

  &-banner {
    padding-bottom: 32px;
    max-width: 1200px;
    margin: auto;

    img {
      border-radius: 4px;
      object-fit: cover;
    }

    .devui-carousel__item-wrapper {
      border-radius: 4px;
    }

    &-right {
      margin: 23px 0;
      display: flex;
      flex-direction: column;

      &-title {
        font-size: 28px;
        color: var(--black-text-color);
        font-weight: 600;
        span {
          vertical-align: middle;
        }
      }

      &-status {
        width: fit-content;
        border: 1px solid #E3E3EE;
        border-radius: 100px;
        padding: 1px 8px;
      }
    }
  }

  &-content {
    margin: auto;
    margin-top: 16px;
    max-width: 1200px;

    &-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #F1F1F8;

      &-month {
        background: linear-gradient(90deg, #2951E0 0%, #8A25D9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: #0000;
        font-weight: 600;
        font-size: 20px;
      }

      &-text {
        font-weight: 600;
        font-size: 16px;
        color: #242536;
      }
    }

    &-list {
      margin-top: 32px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      &-item {
        display: flex;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;
        padding-right: 16px;
        gap: 16px;

        &:hover {
          background: #F9F9FB;
        }

        img {
          border-radius: 4px;
          object-fit: cover;
        }

        &-time {
          padding: 14px 16px;
        }

        &-date {
          font-size: 16px;
          font-weight: 600;
          color: #000;
          font-size: 20px;
        }

        &-title {
          font-weight: 600;
          font-size: 16px;
        }

        &-img {
          border-left: 1px solid #F1F1F8;
        }

        &.g-link:hover {
          color: inherit;
        }
      }

      &-more {
        cursor: pointer;

        &:hover {
          color: #2951E0;

          svg {
            color: #2951E0 !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1280px) {

  .news-activity-banner,
  .news-activity-content {
    padding: 0 32px;
  }
}

@media screen and (max-width: 768px) {
  .news-activity {
    margin-top: 16px;

    &-bg {
      background: none;
    }

    &-banner {
      padding: 0;
      height: 100%;

      &-bg {
        background: url('@/assets/img/activity-bg.png') no-repeat;
        background-size: cover;
        padding-bottom: 16px;
        background-position: center 0;
        width: 100vw;
      }

      &-img {
        width: 100%;

        img {
          max-height: 414px;
          width: 100%;
          height: 100%;
        }
      }

      &-right {
        margin: 0px;

        &-title {
          margin-top: 16px;
        }

        &-btn {
          display: none;
        }
      }
    }
  }

  .news-activity-banner-right,
  .news-activity-banner-img,
  .news-activity-content {
    padding: 0 16px;
  }
}

@media screen and (max-width: 570px) {
  .news-activity-content-list-item {
    padding-right: 0;

    &-img {
      width: 100%;
      img {
        width: calc(100vw - 102px);
        height: 100%;
      }
    }

    &-time {
      padding: 0 16px 0 0;
    }
  }

  .news-activity-content-time {
    display: none;
  }
}
</style>
